<template>
  <div class="container">
    <el-scrollbar element-loading-background="transparent" v-loading="loading">
      <div v-if="tabList.length>0" class="item-wrap">
        <div v-for="(item, index) in tabList" :key="index" class="item">
          <div class="cover">
            <van-image v-if="item.pic" round width="52px" height="52px" :src="item.pic" />
            <van-image
              v-else
              round
              width="52px"
              height="52px"
              :src="item.gender == 1 ? boyUrl : girlUrl"
            />
          </div>
          <div class="name-wrap">
            <span class="name">{{ item.realname }}</span>
            <span class="job">{{ item.name }}</span>
          </div>
          <div class="work">{{ item.glryga }}</div>
          <div class="rate">满意度:{{ item.myd }}%</div>
          <div class="qrcode">
            <qrcode-vue :value="qrcodeUrl + item.id" :size="42" level="H" />
          </div>
        </div>
      </div>
      <van-empty v-else description="暂无数据" />
    </el-scrollbar>
  </div>
</template>

<script setup>
import { getGLRY } from "@/apis/subjectInfo";
import { ref } from "vue";
import QrcodeVue from "qrcode.vue";
// const boyUrl = ref("src/assets/images/ztxx/boy.png");
// const girlUrl = ref("src/assets/images/ztxx/girl.png");
import boyUrl from "@img/ztxx/boy.png";
import girlUrl from "@img/ztxx/girl.png";
const qrcodeUrl = ref(
  "https://h5qct.yskjtz.com/pages/public/index/detailus?id="
);
let loading = ref(false);
const tabList = ref([]);
const getInfo = () => {
  loading.value = true;
  getGLRY().then(res => {
    tabList.value = res.data;
    loading.value = false;
  });
};
getInfo();
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .el-scrollbar {
    height: 100%;
  }
  .item-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    display: grid;
    grid-row-gap: 8px;
    justify-content: space-around;
    align-content: center;
    grid-template-columns: repeat(auto-fill, 140px);
    .item {
      width: 100px;
      height: 180px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      background: #fff;
      color: #000;
      box-shadow: 0 0 2px 3px rgba(233, 227, 227, 0.336); /* 设置发光阴影 */
      margin-bottom: 10px;
      margin-right: 9px;
      letter-spacing: 1px;
      .cover {
        width: 52px;
        height: 52px;
        border: 1px solid #3e63ac;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .name-wrap {
        margin-top: 4px;
        letter-spacing: 0.1em;
        .name {
          font-size: 14px;
          color: #3257a6;
        }
        .job {
          font-family: MicrosoftYaHei;
          margin-left: 4px;
          font-size: 8px;
          color: #4b4b4b;
        }
      }
      .work {
        font-family: MicrosoftYaHeiLight;
        font-size: 6px;
        color: #606060;
        margin-top: 3px;
      }
      .rate {
        margin-top: 5px;
        font-family: MicrosoftYaHei;
        font-size: 8px;
        color: #fd0000;
      }
      .qrcode {
        margin-top: 10px;
      }
    }
  }
}
</style>
